import React, { PureComponent } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card } from 'antd';
import { StandardTable, SearchForm } from '@joy/joy-pro';
import { connect } from 'dva';
import configData from './config-data';
import DateRange from './DateRange';
import { getDateRange } from '@/utils/date';

const [startTime, endTime] = getDateRange();
const pageInfo = { showSizeChanger: true, showQuickJumper: true, defaultPageSize: 20 };
@connect(({ global, loading, allcity, cardoperate, authority }) => ({
  tableData: cardoperate.tableData,
  IssueChannelList: cardoperate.IssueChannelList,
  SalespersonList: cardoperate.SalespersonList,
  ManufactureList: cardoperate.ManufactureList,
  cityList: allcity.cityList,
  searchForm: cardoperate.searchForm,
  permissionsList: authority.permissionsList,
  tableLoading: loading.effects['cardoperate/getTieCardFailLog'],
  watermarkConfig: global.watermarkConfig,
}))
class CardOperate extends PureComponent {
  constructor(props) {
    super(props);
    this.$drawerForm = React.createRef();
    this.state = {
      params: {},
      pageRequest: {
        pageNum: 1,
        pageSize: 10,
      },
      drawerStatus: {
        visible: false,
        type: 'add',
      },
      resultDate: [],
      inputConfig: configData.getSearchInputConfig(props.cityList),
      startTime: startTime,
      endTime: endTime,
    };
    const { pageRequest, params } = this.state;
    this.getSelectList();
    this.getQueryList(params, pageRequest);
  }

  // 条件筛选
  /**
   * @description 条件筛选 [搜索]
   * @author zhe
   * @date 2020-04-13
   * @param {*} formData
   * @param {*} reaclData
   * @param {*} isClear
   * @memberof
   */
  actionSearch = (formData, reaclData, isClear) => {
    const params = formData;
    const { startTime, endTime } = this.state;
    if (isClear) {
      this.setState({
        startTime,
        endTime,
      });
      params.startCreateTime = startTime;
      params.endCreateTime = endTime;
    } else {
      if (startTime && endTime) {
        params.startCreateTime = startTime;
        params.endCreateTime = endTime;
      }
    }
    const pageRequest = { pageNum: 1, pageSize: 10 };
    this.setState({
      params: params,
    });
    this.getQueryList(params, pageRequest);
  };

  /**
   * @description 请求列表数据
   * @author zhe
   * @date 2020-04-13
   * @param {*} params
   * @param {*} pageRequest
   * @memberof
   */
  getQueryList = (params, pageRequest) => {
    const type = 'cardoperate/getTieCardFailLog';
    const param = Object.assign(pageRequest, params);
    const { dispatch } = this.props;
    dispatch({
      type,
      payload: param,
    });
  };
  /**
     * @description 请求事件类型下拉列表数据
     * @author zhe
     * @date 2020-04-14
     * @memberof
     */
  getSelectList = async () => {
    const type = 'allcity/getCityByPage';
    const { dispatch } = this.props;
    const cityList = await dispatch({
      type
    });
    this.setState({
      inputConfig: configData.getSearchInputConfig(cityList)
    })
  };
  rangePickerChange = (e) => {
    if (e && e.length !== 0) {
      this.setState({
        startTime: new Date(e[0]._d),
        endTime: new Date(e[1]._d)
      });
    } else {
      this.setState({
        startTime: '',
        endTime: ''
      });
    }
  }
  /**
   * @description table操作触发改变事件
   * @author songs
   * @date 2019-07-12
   * @param {*} pagination
   * @param {*} filtersArg
   * @param {*} sorter
   * @memberof managementUser
   */
  handleStandardTableChange = (pagination, filtersArg, sorter, actionType) => {
    const { pageSize, current } = pagination;
    const pageNum = current;
    const pageRequest = { pageSize, pageNum };
    this.getQueryList(filtersArg, pageRequest);
  };
  /**
   * @description 切换抽屉状态
   * @author songs
   * @param {*} visible
   * @param {*} type
   * @param {*} title
   */
  changeDrawerStatus = (visible, type = '', activeRecord = {}, event) => {
    this.setState(oldState => ({
      ...oldState,
      drawerStatus: { type, visible },
      activeRecord,
    }));
  };
  tableCol = () => {
    return configData.getTableConfig()
  };

  render() {
    const { tableCol, rangePickerChange } = this;
    const { resultDate, inputConfig, startTime, endTime } = this.state;
    const { tableLoading, watermarkConfig, tableData } = this.props;
    const { list = [], pagination = {} } = tableData;
    return (
      <div>
        <PageHeaderWrapper title="" className="hasContent">
          <div style={{ background: '#fff', padding: '20px 0px 0px 24px', marginBottom: '10px' }}>
            <SearchForm
              defaultInput={inputConfig.slice(0, 3)}
              moreInput={inputConfig.slice(3)}
              gutter={{ md: 10 }}
              useCol={{ sm: 24, md: 12, xl: 8, xxl: 8 }}
              onSearch={this.actionSearch}
            ></SearchForm>
            <DateRange rangePickerChange={rangePickerChange} dateFormat='YYYY-MM-DD HH:mm:ss' startTime={startTime} endTime={endTime} />
          </div>
          <Card bordered={false}>
            <StandardTable
              isWatermark
              watermark={{ ...watermarkConfig }}
              dataSource={list}
              pagination={{ ...pagination, ...pageInfo }}
              columns={tableCol()}
              loading={tableLoading}
              rowKey={(record, index) => record.id}
              onChange={($pagination, filtersArg, sorter) => {
                this.handleStandardTableChange($pagination, this.state.params, sorter, 'cardoperate/getTieCardFailLog');
              }}
            ></StandardTable>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default CardOperate;
